<template>
	
	<tabBar :list="tabList" @tapItem="tapItem">
		<slot></slot>
		<recorder :show="show" :duration="voiceDuration" @complete="completeRecorder" @cancel="show = false"></recorder>
	</tabBar>
	
</template>

<script>
	import {Qiniu} from "../../common/upload.js" ;
	export default {
		name : 'uploadMaterial' ,
		props:{
			chooseAlbumVideo:{ //从相册选择视频
				default : false 
			},
			chooseCameraVideo:{ //从相机选择视频
				default : false 
			},
			videoDuration : {
				default : 10 //秒
			},
			voiceDuration : {
				default : 120 //秒
			}
			
		},
		
		data() {
			return {
				tabList:[
						{icon : 'iconfont icon-pingjiapaizhao' , title : "拍照" , url : "" , isShare : false } ,
						{icon : 'sIcon-recorderFill' , title : "录音" , url : "" , isShare : false , isChoosed : false   }
					],
				qiniu : new Qiniu()	,
				list : [] ,
				show : false 
			};
		},
		
		mounted() {
			if (this.chooseAlbumVideo || this.chooseCameraVideo) {
				this.tabList.push({
					icon : 'iconfont icon-video' , title : "视频" , url : "" , isShare : false , isChoosed : false
				});
			}
		},
		
		methods:{
			
			completeRecorder:function(e){
				this.qiniu.upload(e.tempFilePath , res =>{
					uni.hideNavigationBarLoading();
					var data = { type : 3 , content : res , duration : parseFloat(e.duration/1000).toFixed(2) } ;
					this.$emit("change" , { data } );
				});
				this.show = false ;
			},
			
			tapItem : function(e){
				var index = e.index ;
				if (index == 0) {
					this.chooseImage();
					return ;
				}
				if (index ==1) {
					this.show = true ;
				}
				if (index == 2) {
					this.chooseVideo();
				}
			},
			
			chooseImage:function(e){
				var sourceTypes = ["album", "camera"];
				uni.showActionSheet({
					itemList:["从相册选择","从相机拍照"],
					success : res => {
						uni.chooseImage({
							sourceType:[sourceTypes[res.tapIndex]],
							count:1,
							success: res =>{
								this.qiniu.upload(res.tempFilePaths[0] , res =>{
									uni.hideNavigationBarLoading();
									var data = { type : 1 , content : res } ;
									this.$emit("change" , { data } );
								});
							}
						});
					}
				});
			},
			
			chooseVideo:function(e){
				var arr = [] ;
				if (this.chooseAlbumVideo) {
					arr.push("album");
				}
				if (this.chooseCameraVideo) {
					arr.push("camera");
				}
				if (arr.length == 2) {
					this.chooseAllSourceType();
					return ;
				}
				this.chooseVieoMedia(arr);
			},
			
			chooseAllSourceType:function(){
				var sourceTypes = ["album", "camera"];
				uni.showActionSheet({
					itemList:["从相册选择","从相机拍摄"],
					success : res => {
						this.chooseVieoMedia([sourceTypes[res.tapIndex]])
					}
				});
			},
			
			chooseVieoMedia:function(sourceType){
				uni.chooseMedia({
				  count: 1,
				  mediaType: ['video'],
				  sourceType: sourceType ,
				  maxDuration: 30 ,
				  camera: 'front',
				  success :(res) => {
					 var videoFile = res.tempFiles[0];
					 var path = videoFile.tempFilePath ; //视频文件路径
					 var duration = videoFile.duration ; //时长
					 if ( parseInt(duration/1000) > this.videoDuration ) {
						uni.showToast({
						 	title: '最长' + this.videoDuration + "秒",
						 	icon : 'none'
						});
					 	return ;
					 }
					 var size = videoFile.size ; 
					 var thumbTempFilePath = videoFile.thumbTempFilePath ; //缩略图路径
					 var data = { type : 2 , duration : duration , cover : thumbTempFilePath , content : '' } ;
					 this.qiniu.upload( path , res =>{
					 	data.content = res ;
						this.qiniu.upload( thumbTempFilePath , res =>{
							data.cover = res ;
							uni.hideNavigationBarLoading();
							this.$emit("change" , { data } );
						} , true );
					 });
				  }
				})
			},
		},
		
	}
</script>

<style lang="scss">
	.menuList{
		.fixed{
			padding-bottom: constant(safe-area-inset-bottom); 
			padding-bottom: env(safe-area-inset-bottom);
			z-index: 99;
		}
		.fz12{
			line-height: 28upx;
		}
		.ptb8{
			padding-top: 14upx;
			padding-bottom: 14upx;
		}
		.fz18{
			line-height: 40upx;
		}
	}
	
.menuList .sm12{
	font-size: 12px!important;
}	
</style>
